<template>
  <div class="home">
   <el-container>
  <el-aside :width="isOpen?'200px' : '64px'">
    <!-- 左侧导航菜单 -->
    <div class="logo" :class="{minLogo: !isOpen}"></div>
<el-menu
  router
  :default-active='$route.path'
  :collapse="!isOpen"
  :collapse-transition='false'
  :unique-opened='false'
  background-color="#333B4E"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="/home/welcome">
    <i class="el-icon-setting"></i>
    <span slot="title">首页</span>
  </el-menu-item>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>页面内容</span>
    </template>
    <el-menu-item index="/home/publish">发布文章</el-menu-item>
    <el-menu-item index="/home/alist">内容列表</el-menu-item>
    <el-menu-item index="2-3">评论列表</el-menu-item>
    <el-menu-item index="/home/image">素材管理</el-menu-item>
  </el-submenu>
  <el-submenu index="3">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>粉丝管理</span>
    </template>
    <el-menu-item index="3-1">图文数据</el-menu-item>
    <el-menu-item index="3-2">粉丝概况</el-menu-item>
    <el-menu-item index="3-3">粉丝画像</el-menu-item>
    <el-menu-item index="3-4">粉丝列表</el-menu-item>
  </el-submenu>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">账户信息</span>
  </el-menu-item>
</el-menu>
  </el-aside>
<el-container>
    <el-header>
      <!-- 侧边栏的宽度需要在行内控制(有优先级问题) -->
      <i @click="toggleAside" class="el-icon-s-unfold"></i>
      <span class="cname">苏州传值博客教育有限公司</span>
      <!-- <el-dropdown @command='handleLogo' trigger="click" class="my-dropdown"> -->
    <el-dropdown trigger="click" class='my-dropdown'>
      <span class="el-dropdown-link">
          <img class="user-icon" :src="avatar" alt />
      <span class="user-name">{{uname}}</span>
      <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>git地址</el-dropdown-item>
        <!-- <el-dropdown-item command='logout' divided>退出</el-dropdown-item> -->
        <el-dropdown-item @click.native='handleLogout' divided>退出</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
    </el-header>
<el-main>
  <router-view></router-view>
</el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
// import axios from 'axios'
// 导入接口导游的业务方法
import { getUserInfo } from '@/api/api-home.js'

export default {
  data () {
    return {
      // 控制左侧菜单的展开和折叠
      isOpen: true,
      uname: '',
      avatar: ''
    }
  },
  methods: {
    handleLogout (btn) {
      // console.log('退出')
      // if (btn === 'logout') {
      // 点击退出按钮,实现退出功能
      // 1.提示退出
      this.$confirm('确认退出吗？')
        .then(() => {
          // 如果点击确定会执行
          // 2.清除token
          sessionStorage.removeItem('mytoken')
          // 3.跳转到登陆页面
          this.$router.push('/login')
        })
      // }
    },
    async loadUserInfo () {
      // 调用接口获取用户信息
      try {
        // const ret = await this.$http.get('user/profile')
        //  {
        //   headers: {
        //     Authorization: 'Bearer ' +sessionStorage.getItem('mytoken')}}
        // 获取接口用户返回消息
        // 组件与axios解耦的写法
        // const ret = await this.request({
        //   url: 'user/profile'
        // })
        // 基于封装的业务方法调用接口
        const ret = await getUserInfo()
        if (ret.message === 'OK') {
          this.uname = ret.data.name
          this.avatar = ret.data.photo
          console.log(ret)
        }
      } catch (e) {
        this.$message.error('获取用户信息失败')
      }
    },
    // loadUserInfo () {
    //   axios.get('http://api-toutiao-web.itheima.net/mp/v1_0/user/profile', {
    //     headers: {
    //       Authorization: 'Bearer ' + sessionStorage.getItem('mytoken')
    //     }
    //   }).then(ret => {
    //     // 获取接口返回的用户信息
    //     this.uname = ret.data.data.name
    //     this.avatar = ret.data.data.photo
    //     console.log(ret)
    //   })
    // },
    toggleAside () {
      // console.log(123)
      this.isOpen = !this.isOpen
    }
  },
  created () {
    // 组件加载时自动触发
    this.loadUserInfo()
  }
}
</script>

<style lang='less'>
.home {
  position: absolute;
  height: 100%;
  width: 100%;
  .logo {
  width: 100%;
  height: 60px;
  background: #002244 url(../assets/imgs/logo_admin.png) no-repeat center / 140px auto;
  }
    .minLogo {
    background-position: 15px;
    background-size: 150px;
}
.el-container {
  height: 100%;
  .el-aside {
  background-color:#303B4E;
  overflow-x: hidden;
}
.el-header {
  border-bottom: 1px solid #ddd;
  line-height: 60px;
  .el-icon-s-unfold {
    font-size: 30px;
    line-height: 60px;
    vertical-align: middle;
  }
  .cname {
    font-size: 18px;
    margin: 10px;
  }
  .my-dropdown {
    padding-bottom: 15px;
    float: right;
    .user-icon {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .user-name {
      color: #333;
      font-weight: bold;
      vertical-align: middle;
      padding-left: 5px;
    }
  }
}
}
}
</style>
